<template>
  <div id="address">
    <div class="containner">
      <div class="flex justify-between item-center wrap">
        <div class="address-bar" :class="{'active':addr.uaddr_isdefault == 1}" v-for="addr in address.address_list">
          <div>
            <div class="flex justify-between item-center dark text-left text-lg bold">
              <div class="flex item-center">
                <div>{{addr.uaddr_name}}</div>
                <div class="ml-10">{{addr.uaddr_province}}</div>
              </div>
              <div class="hand gray hover-red">×</div>
            </div>
            <div class="flex justify-between item-end mt-20">
              <div class="address-left">
                <div class="flex item-center text-sm">
                  <div class="address-title text-right gray">收货人：</div>
                  <div class="text-left dark">{{addr.uaddr_name}}</div>
                </div>
                <div class="flex item-center text-sm mt-10">
                  <div class="address-title text-right gray">所在地区：</div>
                  <div class="text-left dark">{{addr.uaddr_city}}</div>
                </div>
                <div class="flex item-center text-sm mt-10">
                  <div class="address-title text-right gray">地址：</div>
                  <div class="text-left dark">{{addr.uaddr_address}}</div>
                </div>
                <div class="flex item-center text-sm mt-10">
                  <div class="address-title text-right gray">手机：</div>
                  <div class="text-left dark">{{addr.uaddr_phone}}</div>
                </div>
              </div>
              <div class="address-right">
                <div class="text-right text-sm gray hover-red hand">编辑</div>
                <div v-show="addr.uaddr_isdefault == 0" class="text-right text-sm gray hover-red hand mt-10"
                  @click="isdefault(addr)">设为默认</div>
              </div>
            </div>
          </div>
        </div>
        <div class="address-append-bar">
          <div style="display: block;">
            <div class="append-tag" @click="set_vs(true)">+</div>
          </div>
          <div v-show="address.vs"><input type="text" v-model="address.uaddr_name" placeholder="请填写收货人姓名"
              class="addr_text hand gray"><input type="text" v-model="address.uaddr_phone" placeholder="请填写收货人手机号码"
              class="addr_text hand gray mt-10">
            <div class="mt-10 flex justify-between item-center">
              <!-- 省 -->
              <select class="address_select hand" @change="province_changed($event)" v-model="address.uaddr_province">
                <option v-for="province in address.china_list" :key="province.id">{{province.name}}</option>
              </select>
              <!-- 市 -->
              <select class="address_select hand" @change="city_changed($event)" v-model="address.uaddr_city">
                <option v-for="city in address.city_list" :key="city.id">{{city.name}}</option>
              </select>
              <!-- 区 -->
              <select class="address_select hand" v-model="address.uaddr_district">
                <option v-for="district in address.district_list" :key="district.id">{{district.name}}</option>
              </select>
            </div><input type="text" placeholder="请填写收获详细地址" v-model="address.uaddr_address"
              class="addr_text hand gray mt-10">
            <div class="mt-20 flex justify-end item-center"><button class="address-btn btn-save hand rounded"
                @click="save_addr()"> 保 存
              </button><button class="address-btn btn-cancel hand rounded ml-20"> 取 消 </button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState,
    mapMutations
  } from "vuex"
  export default {
    computed: {
      ...mapState(['address'])
    },
    methods: {
      ...mapMutations('address', ['set_vs', 'set_city_list', 'set_district_list']),
      ...mapActions('address', ['get_address_list', 'get_china_list', 'save_addr', 'update_address']),
      //省切换
      province_changed(e) {
        //重写设置市数据
        this.set_city_list(this.address.china_list[e.target.selectedIndex].children)
        //重新设置区县数据
      },
      //市切换
      city_changed(e) {
        //重新设置区县数据
        this.set_district_list(this.address.city_list[e.target.selectedIndex].children)
      },
      //设置默认地址
      isdefault(addr) {
        // 查找已经是默认的
        const address = this.address.address_list.find(function(a) {
          return a.uaddr_isdefault == 1;
        })
        //发送请求修改成非默认,找不到undefined
        if (address) {
          address.uaddr_isdefault = 0;
          this.update_address(address);
        }
        //设置当前点击的地址为默认
        addr.uaddr_isdefault = 1;
        this.update_address(addr)
      }
    },
    mounted() {
      //当前用户地址列表
      this.get_address_list();
      //省市区
      this.get_china_list();
    }
  }
</script>

<style scoped>
  @import '../assets/css/address.css'
</style>
